<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		var i = 2;
		$("#addFile").click(function(){
			$(this).parent().parent().before(
				"<tr class=\"file\">"
				+"	<td>请选择上传的第 "+i+" 个文件：</td>"
				+"	<td><input type=\"file\" name=\"file"+i+"\" /></td>"
				+"</tr>"
				+"<tr class=\"desc\">"
				+"	<td>请输入第 "+i+" 个文件的描述信息：</td>"
				+"	<td><input type=\"text\" name=\"desc"+i+"\" /><button type=\"button\" id=\"delete"+i+"\">删除</button></td>"
				+"</tr>"
			);
			i++;
			
			//获取到生成的删除按钮
			$("#delete"+(i-1)).click(function(){
				var $tr = $(this).parent().parent();
				$tr.prev("tr").remove();
				$tr.remove();
				
				//如果删除中间的tr节点，我们要对所有的tr节点重新排序
				$(".file").each(function(index){
					var count = index + 1;
					$(this).find("td:first").text("请选择上传的第 "+count+" 个文件：");
					$(this).find("td:last input").attr("name", "file"+count);
				});
				
				$(".desc").each(function(index){
					var count = index + 1;
					$(this).find("td:first").text("请输入第 "+count+" 个文件的描述信息：");
					$(this).find("td:last input").attr("name", "desc"+count);
				});
			});
		});
	});
</script>
</head>
<body>
	<form action="${pageContext.request.contextPath }/upload.up" enctype="multipart/form-data" method="post">
	<table style="text-align: center; margin:20px auto; padding: 50px; border: 1px #ccc solid;">
		<c:if test="${not empty errorMsg }">
		<tr>
			<td colspan="2" style="color: red; font-weight: bolder;">${errorMsg }</td>
		</tr>
		</c:if>
		<tr class="file">
			<td>请选择上传的第 1 个文件：</td>
			<td><input type="file" name="file1" /></td>
		</tr>
		<tr class="desc">
			<td>请输入第 1 个文件的描述信息：</td>
			<td><input type="text" name="desc1" /></td>
		</tr>
		<tr>
			<td align="center"><input type="submit" value="点击上传文件" ></td>
			<td align="center"><button type="button" id="addFile">点击新增一个附件</button></td>
		</tr>
		<tr></tr>
	</table>
	</form>
	
	<table style="text-align: center; margin:20px auto; padding: 50px; " border="1"style="text-align: center; margin:20xp auto; padding: 50px; " border="1" cellpadding="0" cellspacing="0">
		<tr>
			<td>文件id</td>
			<td>文件名</td>
			<td>文件类型</td>
			<td>文件大小</td>
			<td>文件描述</td>
			<td>上传日期</td>
			<td>删除文件|下载文件</td>
		</tr>
		<c:forEach var="uf" items="${uploadFiles }">
		<tr>
			<td>${uf.id }</td>
			<td>${uf.oldFileName }</td>
			<td>${uf.fileType }</td>
			<td>${uf.fileSize }</td>
			<td>${uf.desc }</td>
			<td>${uf.saveTime }</td>
			<td><a href="${pageContext.request.contextPath }/deleteFile.up?id=${uf.id}">删除</a>|
					<a href="${pageContext.request.contextPath }/downloadFile.up?id=${uf.id}">下载</a></td>
		</tr>
		</c:forEach>
	</table>
	
</body>
</html>